<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      xmlns:th="http://www.thymeleaf.org"
      layout:decorator="backstage/layout">
<head>
    <title>分区管理</title>
</head>

<body>
<div id="content" layout:fragment="content">
<script type="text/javascript" src="../../admin/js/bootstrap-paginator.js"></script>
<script type="text/javascript" src="../../admin/ace/js/fuelux/fuelux.spinner.min.js"></script>
<script type="text/javascript" src="../../admin/ace/js/ace-elements.min.js"></script>
    <script type="text/javascript">
    function paging(page){
	    $("[name=page]").val(page);
	    $("#searchForm").submit();
	}
        $(function(){
            $(".btn-danger").click(function(e){
                if(confirm("确定删除吗?"))
                {
                    $.ajax({
                        url:'/zone/deleteById.json?id='+ e.currentTarget.id,
                        type:'POST',
                        dataType:"json",
                        success:function(date) {
                            if(date.suc)
                            {
                                $(".close").click();
                                alert("删除成功！");
                                window.location.href = "/zone/zoneList.htm";
                            }else{
                               alert("删除有误！");
                                window.location.href = "/zone/zoneList.htm";
                            }
                        }
                    });
                }
            });
            
            $('.editZoneBT').click(function(e){
                e.preventDefault();
              //  $("#edit-receivableTime").val($("#invoice-receivableTime-"+e.currentTarget.id).val());
                $("#name").val($("#zoneName-"+e.currentTarget.id).val());
               
                $("#edit-id").val(e.currentTarget.id);
                $('#editModel').modal('show');
            });
            
            $("#updateZone").validate( {
                checkStart : true,
                errorElement: 'span',
                errorClass: 'help-inline',
                focusInvalid: false,
                rules : {
                    name : {
                        required: true,
                        remote:{
                            url: "/zone/checkUnique.json",
                            type: "post",
                            data:{
                           	  id:function(){return $("#edit-id").val();},
                              name: function(){return $("#name").val();}
                            }
                        } 
                    }
                },
                messages : {
                    name : {
                        required : "必须填写",
                        remote : "名称已存在"
                    }
                },
                submitHandler : function(form) {

                    $("#updateZone").ajaxSubmit(function(date,res,me){
                        if(date.suc){
                            alert("修改成功了！");
                            $(".close").click();
                            window.location.href = "/zone/zoneList.htm";
                        }else{
                        	alert("修改失败了！");
                        }
                    });
                },
                highlight: function (e) {
                    $(e).closest('.control-group').removeClass('info').addClass('error');
                }
            });
            
            $("#addZone").validate( {
                checkStart : true,
                errorElement: 'span',
                errorClass: 'help-inline',
                focusInvalid: false,
                rules : {
                    name : {
                        required: true,
                        remote:{
                            url: "/zone/checkUnique.json",
                            type: "post",
                            data:{
                           	  id:function(){return $("#edit-id").val();},
                              name: function(){return $("#add-name").val();}
                            }
                        } 
                    }
                },
                messages : {
                    name : {
                        required : "必须填写",
                        remote : "名称已存在"
                    }
                },
                submitHandler : function(form) {
                    $("#addZone").ajaxSubmit(function(date,res,me){
                        if(date.suc){
                            alert("保存成功了！");
                            window.location.href = "/zone/zoneList.htm";
                        }else{
                        	alert("添加失败！");
                        }
                    });
                },
                highlight: function (e) {
                    $(e).closest('.control-group').removeClass('info').addClass('error');
                }
            });
            
            var options = {
                    currentPage: $("[name=page]").val(),
                    totalPages: $("[name=totalPage]").val(),
                    alignment:"left",
                    itemTexts: function (type, page, current) {
                        switch (type) {
                            case "first":
                                return "首页";
                            case "prev":
                                return "上一页";
                            case "next":
                                return "下一页";
                            case "last":
                                return "末页";
                            case "page":
                                return page;
                        }
                    },
                    pageUrl: function(type,page,current){
                        return "javascript:paging('"+page+"');";
                    }
                }
            $('#example').bootstrapPaginator(options);
        });
    </script>
    <div class="box-content">
        <div class="row-fluid sortable">
            <div class="box span12">
                <h3 class="row-fluid header smaller lighter blue">
                   <span class="label label-large label-pink arrowed-right">分区管理</span>
                </h3>
                <h3 class="row-fluid header smaller lighter blue">
                    <a href="#" class="btn btn-small btn-success btn-setting" data-toggle="modal" data-target="#myModal"><i class="icon-user"></i>添加分区</a>
                </h3>
                
                 <form action="/zone/zoneList.htm" method="post" id="searchForm">
			            <input type="hidden"  id="page" name="page" th:value="${page.page}" />
		            <input type="hidden"  name="totalPage" th:value="${page.totalPage}" />
			           
                 </form>
                <div class="box-content">
                    <table class="table table-striped table-bordered bootstrap-datatable datatable">
                        <thead>
                        <tr >
                            <th style="text-align: center;">编号</th>
                            <th style="text-align: center;">分区名称</th>
                            <th style="text-align: center;">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="zone:${page.result}">
                            <td th:text="${zone.id}" style="text-align: center;"></td>
                            <td th:text="${zone.name}" style="text-align: center;"></td>
                            <td style="text-align: center;">
                                <a class="btn btn-small btn-danger" th:id="${zone.id}" style="width: 26px;">
                                                                                                             删除 
                                </a>
                                 <a class="btn btn-info btn-small editZoneBT" th:id="${zone.id}" style="width: 26px;">
                                                                                                           编辑 
                                </a>
                              <input type="hidden" th:id="'zoneName-'+${zone.id}" th:value="${zone.name}"/>
                                
                                
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    
                     <div style="margin-bottom: 0px; margin-left: auto;margin-right: auto">
                        <div id="example" style="margin-bottom:0px"></div>
                     </div>
                </div>
            </div><!--/span-->
        </div><!--/row-->
    </div>
    <div id="myModal" class="modal hide fade in">
        <div class="modal-header">
            <button class="close" data-dismiss="modal" type="button">×</button>
            <h3>添加分区</h3>
        </div>
        <form class="form-horizontal" style="margin: 0" action="/zone/addZone.json" method="post" id="addZone">
            <fieldset>
                <div class="modal-body">
                    <div class="control-group">
                        <label class="control-label">名称：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="text" value="" name="name" id="add-name"/>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="submit" class="btn btn-primary" value="保存" />
                    <a href="#" class="btn btn-small" data-dismiss="modal">取消</a>
                </div>
            </fieldset>
        </form>
    </div>
    
    
    <div id="editModel" class="modal hide fade in" style="display: none;">
        <div class="modal-header">
            <button class="close" data-dismiss="modal" type="button">×</button>
            <h3>编辑分区</h3>
        </div>
        <form class="form-horizontal" style="margin: 0" action="/zone/updateZone.json" method="post" id="updateZone">
             <input id="edit-id" name="id" type="hidden"/>
            <fieldset>
                <div class="modal-body">
                    <div class="control-group">
                        <label class="control-label">名称：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="text" value="" name="name" id="name"/>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="submit" class="btn btn-primary" value="保存" />
                    <a href="#" class="btn btn-small" data-dismiss="modal">取消</a>
                </div>
            </fieldset>
        </form>
    </div>
</div>
</body>
</html>
